<template>
  <div class="create__content">
    <el-form :model="postForm" :rules="rules" ref="postForm" class="form">
        <el-col :span="15" :offset="5">

            <el-form-item class="formTop">
                <h2>创建VIP类型</h2>
            </el-form-item>
            
            <el-form-item label="vip类型id:" label-width="80px" prop="type">
                <el-input-number v-model="postForm.type" @change="handleTypeChange" :min="1" :max="100" label="请输入vip类型id"></el-input-number>
            </el-form-item>

            <el-form-item label="vip类型名称:" label-width="80px" prop="typeName">
                <el-input style="width:200px;" v-model="postForm.typeName" placeholder="请输入vip类型名称"></el-input>
            </el-form-item>

            <el-form-item label-width="150px" label="VIP类型包含服务：" prop="services">
                <el-select v-model="service" multiple placeholder="请选择（可多选）" @change="getServiceIds" track-by="value" label="label">
                    <el-option
                    v-for="item in serviceIds"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <div class="create">
                <el-button v-loading="loading" type="success" :disabled="isDisable" @click="submitForm()">创建VIP类型</el-button>
            </div>

        </el-col> 
    </el-form>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth' // 验权
import { getNewVipType } from '@/api/vip' // 方法

export default{
  name:'add',
  components: {},
  data(){
    return{
      postForm:{
        type:null,
        typeName:null,
        services:null
      },
      serviceIds:[
        { id:1, name:'生涯测评' },
        { id:2, name:'升学规划' },
        { id:3, name:'选科选课' },
        { id:4, name:'升学路径' },
        { id:5, name:'院校库' },
        { id:6, name:'专业库' },
        { id:7, name:'职业库' },
        { id:8, name:'升学课程' },
        { id:9, name:'模拟志愿填报' },
        { id:10, name:'正式志愿填报' },
        { id:11, name:'研学实践' },
        { id:12, name:'升学服务' },
        { id:13, name:'高一研学团' },
        { id:14, name:'高二研学团' },
        { id:15, name:'高三研学团' }
      ],
      rules: {
        type: [{ required: true, message: '请输入vip类型id', trigger: 'change' }],
        typeName: [{ required: true, message: '请输入vip类型名称', trigger: 'change' }],
        services: [{ required: true, message: '请设置相关服务', trigger: 'change' }]
      },
      service: [],
      isDisable: false,
      loading: false
    }
  },
  mounted(){

  },
  methods:{
    handleTypeChange(value){
      this.postForm.type = value
    },
    getServiceIds(){
      let arr = new Array()
      arr = this.service
      const str = arr.join(',')
      this.postForm.services = str
    },
    submitForm(){
      if(this.postForm.typeName.trim().length == 0 || this.postForm.typeName.length == 0){
        this.$message({
          title: '失败',
          message: 'vip类型名称为必填项，请输入后再保存',
          type: 'error',
          duration: 2000
        })
        return
      }
      if(this.postForm.services == '' || this.postForm.services == null){
        this.$message({
          title: '失败',
          message: '必须为该VIP类型设置相关服务',
          type: 'error',
          duration: 2000
        })
        return
      }
      const params = this.postForm
      getNewVipType(params).then(res => {
        if (res.code == 0) {
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
          this.$router.push({ path:'./type' })
        }else{
          this.$message({
            title: '失败',
            message: message,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(() => {})
    }
  }

}

</script>


<style scoped lang="scss">
.create__content {
  width: 988px;
  margin: 0 auto;
}
.form{
  margin-top: 50px;
}
.formTop{
  width: 300px;
  margin: 0 auto 20px;
}
.create {
  text-align:center;
  margin: 0 auto;
  margin-top: 400px;
}
</style>